<template>
	<div class="tab_group" :key="radom">
		<div @click="onChange(item)" class="f-trans10"
			:class="[active == item.value ? checkedClass : defaultClass]" v-for="item in items">
			<!-- :key="item" :aaa="radom" -->
			<div class="tab-icon f-trans10"></div>
			<span class="f-dib f-tac"> {{ item.name }}</span>
		</div>
	</div>
</template>

<script >

export default {
	components: {},
	props: {
		items: {
			type: Array,
			default: function () {
				return [{ name: "选项1", value: "1" }, { name: "选项2", value: "2" }];
			},
		},
		active: {
			type: [String, Number],
			default: "1",
		},
		defaultClass: {
			type: String,
			default: "default-class",
		},
		checkedClass: {
			type: String,
			default: "checked-class",
		},

	},
	data() {
		return {
			radom: Math.random()
		}
	},
	created() { },
	mounted() { },
	methods: {
		onChange:function (key) {
			console.log(11111, key.value)

			// 禁用情况下不触发数据更新.
			if (key.disabled) {
				this.$emit("change", key);
				return;
			}
			
			this.$emit('update:active', key.value);
			this.$emit("change", key.value);
		}
	},
	watch: {
		aaaa: {
			handler(val) {
				//监听value的变化
			},
			deep: true,
			immediate: true
		}
	},
	computed: {

	},
	destoryed() { },
}

</script>

<style scoped>
.tab_group {
	display: flex;

}

.tab_group[disabled="true"] {
	pointer-events: none;
	cursor: not-allowed !important;
}

.checked-class {
	color: #1793ff;
}
</style>
